import { Component } from 'react';
import { View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { AtDivider } from 'taro-ui';
import EmptyContent from '@/components/EmptyContent';
import { getServiceList } from '@/service/apis/service/index';
import { checkAuth } from '@/utils/authUtil';
import SearchBar from '@/components/SearchBar';
import globalStore from '@/store/global';
import SkuModal from '@/components/SkuModal';
import ServiceSku from '../components/ServiceSku/index';
import './index.scss';

export default class Index extends Component {
  state = {
    searchValue: '',
    skuModalShow: false,
    currentService: {},
    skuInfo: {
      imageUrl: '',
      goodsName: '',
      price: 0,
      id: 0,
      count: 1,
    },
    serviceList: [],
    currentList: [],
    searched: false,
    skuList: [],
  };
  componentDidMount = async () => {
    this.getServiceList();
  };

  onSearch = (value: string) => {
    console.log('value', value);
    if (value) {
      const filterList = this.state.serviceList.filter(
        (item) => item.goods_name.indexOf(value) !== -1 || item.brief.indexOf(value) !== -1,
      );
      this.setState({
        currentList: filterList,
        searched: true,
      });
    } else {
      this.setState({
        currentList: this.state.serviceList,
        searched: false,
      });
    }
  };

  getServiceList = async () => {
    try {
      const { data } = await getServiceList({
        store_name: globalStore.currentShop.store_name,
        way: '到店',
      });
      this.setState({
        serviceList: data.services_all_list,
        currentList: data.services_all_list,
      });
      console.log('data', data);
    } catch (err) {
      console.log('err', err);
      Taro.showToast({
        title: err.message,
        icon: 'none',
      });
    }
  };

  onSelectSku = (service: any) => {
    console.log('service', service);
    const skuList = service?.products || [];
    this.setState({
      currentService: service,
      skuList: service.products.map((item) => {
        return {
          id: item.id,
          name: item.specifications,
          price: item.vip_price,
          number: item.number,
          imageUrl: item.url,
        };
      }),
      skuModalShow: true,
    });
    if (skuList?.length > 0) {
      const defaultSku = skuList[0];
      this.setState({
        skuInfo: {
          imageUrl: defaultSku.url,
          goodsName: service.goods_name,
          price: defaultSku.vip_price,
          count: 1,
          id: defaultSku.id,
        },
      });
    }
  };

  onChangeSku = (sku) => {
    console.log('sku', sku);
    this.setState({
      skuInfo: {
        ...this.state.skuInfo,
        ...sku,
      },
    });
  };

  onSkuCountChange = (count: number) => {
    console.log('count', count);
    this.setState({
      skuInfo: {
        ...this.state.skuInfo,
        count,
      },
    });
  };
  onSkuSubmit = () => {
    console.log(this.state.skuInfo);
    const { skuInfo, currentService } = this.state;
    console.log('skuInfo: ', skuInfo);
    checkAuth(() => {
      Taro.navigateTo({
        url: `/subPages/service/submit/index?id=${currentService.id}&skuId=${skuInfo.id}&count=${skuInfo.count}&serviceType=daodian`,
      });
    });
  };

  render() {
    const { currentList, searchValue, skuList, skuModalShow, skuInfo, searched } = this.state;
    return (
      <View className="service-sku-page">
        <SearchBar searchValue={searchValue} onChange={this.onSearch} />
        <View>
          <View className="cart-list">
            {currentList.map((item) => {
              // @ts-ignore
              return <ServiceSku serviceType="daodian" key={item.id} service={item} onSelect={this.onSelectSku} />;
            })}
            {currentList.length === 0 &&
              (searched ? (
                <EmptyContent title="暂未搜索到相关服务" />
              ) : (
                <EmptyContent title="暂无服务" />
              ))}
            {
              currentList.length !== 0 && <AtDivider content="~没有更多了~" fontColor="#aaa" lineColor="transparent" />
            }
          </View>
          {/* <BottomBtn totalCount={totalCount} /> */}
        </View>
        <SkuModal
          show={skuModalShow}
          type="service"
          showNumber={false}
          skuList={skuList}
          skuInfo={skuInfo}
          onChangeSku={this.onChangeSku}
          onCountChange={this.onSkuCountChange}
          onSubmit={this.onSkuSubmit}
        />
      </View>
    );
  }
}
